ais-search-box (Vue InstantSearch)

A widget for Vue InstantSearch that lets users enter a search query.

The ais-search-box widget lets users perform a text-based query.

TThe search box is usually the main entry point to start the search on an InstantSearch page. It’s usually placed at the top of a search experience, so users can start searching right away.

Usage

<ais-search-box
    // Optional parameters
    placeholder,
    autofocus,
    ignore-composition-events,
    submit-title,
    reset-title,
    show-loading-indicator,
    class-names
/>

<ais-search-box
    // Optional parameters
    placeholder,
    autofocus,
    ignore-composition-events,
    submit-title,
    reset-title,
    show-loading-indicator,
    class-names
/>

<ais-search-box />

Demo

Import

Import ais-configure as a component or with a plugin.

Component

import { AisSearchBox } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
components: {
    AisSearchBox
},
// ...
};

To ensure your code is correctly bundled, see Optimize build size.

import { AisSearchBox } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
components: {
    AisSearchBox
},
// ...
};

To ensure your code is correctly bundled, see Optimize build size.

import Vue from 'vue';
import InstantSearch from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

Vue.use(InstantSearch);

This imports all the widgets, even the ones you don’t use. For more information, see Getting started with Vue InstantSearch.

Props

placeholder · string

The placeholder text of the input.

<ais-search-box placeholder="Search for products..." />

autofocus · boolean · default: "true"

Whether to automatically focus on the input when rendered.

<ais-search-box autofocus />

ignore-composition-events · boolean · default: "false"

Whether to update the search state in the middle of a composition session. This is useful when users need to search using non-Latin characters.

<ais-search-box ignore-composition-events />

Available from v4.13.6.

submit-title · string · default: "search"

The submit button text.

<ais-search-box submit-title="Submit the query" />

reset-title · string · default: "clear"

The clear button text.

<ais-search-box reset-title="Remove the query" />

show-loading-indicator · boolean · default: "false"

Whether to show the loading indicator (replaces the submit button if the search is stalled).

<ais-search-box show-loading-indicator />

class-names · boolean · default: "{}"

The CSS classes you can override:

• ais-SearchBox: the root element of the widget.
• ais-SearchBox-form: the form element.
• ais-SearchBox-input: the input element.
• ais-SearchBox-submit: the submit button element.
• ais-SearchBox-submitIcon: Magnifier icon used with the search input.
• ais-SearchBox-reset: the reset button element.
• ais-SearchBox-resetIcon: the reset button icon.
• ais-SearchBox-loadingIndicator: the loading indicator element.
• ais-SearchBox-loadingIcon: the loading indicator icon.

<ais-search-box
    :class-names="{
        'ais-SearchBox': 'MySearchBox',
        'ais-SearchBox-form': 'MySearchBoxForm',
        // ...
    }"
/>

HTML output

HTML

<div class="ais-SearchBox">
<form class="ais-SearchBox-form" novalidate>
    <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
    <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
    <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
        ...
    </svg>
    </button>
    <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
    <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
        ...
    </svg>
    </button>
    <span class="ais-SearchBox-loadingIndicator" hidden>
    <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
        ...
    </svg>
    </span>
</form>
</div>

Customize the UI

Slots

default

Use the default slot to override the DOM output. When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

<ais-search-box>
<template v-slot="{ currentRefinement, isSearchStalled, refine }">
    <input
    type="search"
    :value="currentRefinement"
    @input="refine($event.currentTarget.value)"
    >
    <span :hidden="!isSearchStalled">Loading...</span>
</template>
</ais-search-box>

Scopes

• currentRefinement: string: the current query used for the search.
• isSearchStalled: boolean: whether InstantSearch has detected that searches are stalled.
• refine: (string) => void: the function to change the query.

submit-icon

The slot to override the DOM output of the submit icon.

<ais-search-box>
    <template v-slot:submit-icon>🔎</template>
</ais-search-box>

reset-icon

The slot to override the DOM output of the reset icon.

<ais-search-box>
    <template v-slot:reset-icon>🚫</template>
</ais-search-box>

loading-indicator

The slot to override the DOM output of the loading indicator.

<ais-search-box>
    <template v-slot:loading-indicator>⏳</template>
</ais-search-box>